<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>我的访客</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/history.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="history-header border-bottom">
      <span :class="[ history_type == 'default' ? 'active' : '']" v-on:click="rankingTypeSelect('default')">看过我的人</span>
      <span :class="[ history_type == 'my' ? 'active' : '']" v-on:click="rankingTypeSelect('my')">我看过的人</span>
    </div>
    <div class="history-main">
      <div v-if="all.length == 0" class="empty-wrap">
        <img class="empty-img" src="../image/empty.png">
        <div class="empty-text">😔暂无访客</div>
      </div>
      <div v-else class="list-wrap">
        <div v-for="(item, i) in all" class="list-item" @click="openDetail(item)">
          <div class="avatar">
            <img :src="history_type == 'default' ? item.member.avatar + '?imageView2/1/w/100/h/100' : item.read.avatar + '?imageView2/1/w/100/h/100'" alt="">
          </div>
          <div class="info-wrap">
            <div class="name">
              <span class="name-text">{{history_type == 'default' ? item.member.name : item.read.name}}</span>
              <span :class="[history_type == 'default' ? 'age' + item.member.sex : 'age' + item.read.sex, 'age']">
                <i :class="[history_type == 'default' ? 'icon-sex-' + item.member.sex : 'icon-sex-' + item.read.sex, 'icon']"></i>{{history_type == 'default' ? item.member.age : item.read.age}}</span>
            </div>
            <div class="info">{{history_type == 'default' ? item.member.city : item.read.city}}</div>
          </div>
          <i class="iconfont icon-next"></i>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app;
  apiready = function () {
    app = new Vue({
      el: '#app',
      data: {
        history_type: 'default',
        all: [],
        page: 1,
      },
      created: function () {
        var _this = this;
        api.setRefreshHeaderInfo({
          bgColor: '#ccc',
          textColor: '#fff',
          textDown: '下拉刷新...',
          textUp: '松开刷新...'
        }, function (ret, err) {
          _this.page = 1;
          setTimeout(function () {
            _this.getHomeLocal();
          }, 1000);
        });
        api.addEventListener({
          name: 'scrolltobottom',
          extra: {
            threshold: 0
          }
        }, function (ret, err) {
          setTimeout(function () {
            _this.getHomeLocal();
          }, 500);
        });
      },
      mounted: function () {
        var _this = this;
        _this.getHomeLocal();
      },
      methods: {
        rankingTypeSelect: function (type) {
          var _this = this;
          _this.history_type = type;
          _this.page = 1;
          _this.all = [];
          _this.getHomeLocal();
        },

        getHomeLocal: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: ''
          });
          api.ajax({
            url: baseUrl + 'user/log',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                type: _this.history_type,
                page: _this.page
              },
            }
          }, function (ret, err) {
            api.refreshHeaderLoadDone();
            api.hideProgress();
            if (ret.status == 200) {
              if (_this.page == 1) {
                _this.page++;
                _this.all = ret.data;
              } else if (_this.page <= ret.pagination.last_page) {
                _this.page++;
                for (var i = 0; i < ret.data.length; i++) {
                  _this.all.push(ret.data[i])
                }
              } else {
                api.toast({
                  msg: '没有更多了'
                })
              }
            }
          })
        },

        // 个人主页
        openDetail: function (item) {
          var _this = this;
          var id = '';
          if (_this.history_type == 'default') {
            id = item.member.member_id;
          }
          if (_this.history_type == 'my') {
            id = item.read.member_id;
          }
          api.openWin({
            name: 'user_home',
            url: 'user_home.html',
            slidBackEnabled: false,
            pageParam: {
              member_id: id
            }
          });
        },

      },
    })
  }
</script>